<!--
    * Time    : 2020-12-09 15:13:41
    * Author  : zhangTj
    * Desc    : 余额详情页
-->

<template>
    <div class="w750">
        <div class="h-100 bg-fff pt-1">
            <div class="d-flex flex-column a-center font-14 border-bottom mx-3 py-2">
                <div>
                    <img
                        v-if="detailData.tradeType == 'PAYMENT_GOODS'"
                        src="@/assets/images/goods.png"
                        alt=""
                        style="width: 75px; height: 75px"
                        class="rounded-circle"
                    />
                    <img
                        v-else-if="detailData.tradeType == 'REFUND'"
                        src="@/assets/images/refund.png"
                        alt=""
                        style="width: 75px; height: 75px"
                        class="rounded-circle"
                    />
                    <img
                        v-else-if="detailData.tradeType == 'RECHARGE'"
                        src="@/assets/images/recharge.png"
                        alt=""
                        style="width: 75px; height: 75px"
                        class="rounded-circle"
                    />
                    <img
                        v-else-if="detailData.tradeType == 'WITHDRAW'"
                        src="@/assets/images/withdraw.png"
                        alt=""
                        style="width: 75px; height: 75px"
                        class="rounded-circle"
                    />
                    <img v-else src="@/assets/images/recharge.png" alt="" style="width: 75px; height: 50px" class="rounded-circle" />
                </div>
                <div class="mt-05">{{ detailData.tradeType | getTradeType }}</div>
                <div
                    class="font-weight mt-1 font-18"
					:class="[detailData.mode == 'INCOME' ? 'text-danger' : 'text-primary']"
                >
                    {{ detailData.mode == 'INCOME' ? '+' : '-' }}￥{{ money(detailData.totalAmount)[0] }}.{{ money(detailData.totalAmount)[1] }}
                </div>
            </div>
            <div class="mt-2 px-3 font-14">
                <div class="d-flex mb-1">
                    <span class="flex-1 text-right">交易时间：</span>
                    <span class="flex-2 ml-1">{{ detailData.paymentTime | dateformat }}</span>
                </div>
                <div class="d-flex mb-1">
                    <span class="flex-1 text-right">收益余额：</span>
                    <span class="flex-2 ml-1">￥{{ money(detailData.accountBalance)[0] }}.{{ money(detailData.accountBalance)[1] }}</span>
                </div>
                <div class="d-flex mb-1">
                    <span class="flex-1 text-right">订单编号：</span>
                    <span class="flex-2 ml-1">{{ detailData.bizOrderNo || '-' }}</span>
                </div>
                <div class="d-flex mb-1">
                    <span class="flex-1 text-right">支付编号：</span>
                    <span class="flex-2 ml-1">{{ detailData.outPaymentNo || '-' }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import legendImage from '@/components/legendImage/legendImage'
import { predepositBalanceDetail } from '@/api/balance'
import cash from 'utils/tool'

export default {
    name: 'extensionUsageRecordDetail',
    components: { legendImage },
    data() {
        return {
            detailData: {},
            id: '',
            money: cash
        }
    },
    computed: {},
    watch: {},
    filters: {
        getTradeType(type) {
            const dict = {
                RECHARGE: '充值',
                WITHDRAW: '提现',
                REFUND: '退款',
                GOODS: '商品交易'
            }
            return dict[type]
        }
    },
    created() {},
    destroyed() {},
    mounted() {
        this.id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        getDetail() {
            predepositBalanceDetail({
                id: this.id
            })
                .then((res) => {
                    this.detailData = res.result
                })
                .catch((err) => {
                })
        }
    }
}
</script>

<style lang="scss" scoped></style>
